<template>
  <div>
    <Header />
    <Right />
    <div class="help_me">
      <div>
        <img src="../../assets/image/house.png" alt class="need_img" />
      </div>
      <div>
        <div class="help_title">
          <p class="help_blon">01/04</p>
          <p class="help_text">您的购房预算是多少</p>
          <p class="help_unit">(单位：万)</p>
        </div>
        <p class="help_num">{{value}}</p>
        <p class="help_slider">
          <van-slider v-model="value" range active-color="#F58057" />
        </p>
      </div>
      <div>
        <div class="help_title">
          <p class="help_blon">02/04</p>
          <p class="help_text">您的心仪区域是哪里</p>
          <p class="help_unit">可多选</p>
        </div>
        <div class="city_box">
          <p
            v-for="(item, index) in region"
            :key="index"
            @click="Onregion(item,index), item.show = !item.show "
            :class="[item.show?'region_text':'region_p']"
          >{{ item.text }}</p>
        </div>
      </div>
      <div>
        <div class="help_title">
          <p class="help_blon">03/04</p>
          <p class="help_text">您要购置的户型</p>
        </div>
        <div class="room_box">
          <p
            v-for="(item, index) in houseList"
            :key="index"
            @click="Onhouse(item,index)  "
            :class="[houseType == item?'region_text':'region_p']"
          >{{ item }}</p>
        </div>
      </div>
      <div>
        <div class="help_title">
          <p class="help_text">您希望购买的面积是</p>
          <p class="help_unit">(单位：平米)</p>
        </div>
        <p class="help_num">{{value1}}</p>
        <p class="help_slider">
          <van-slider v-model="value1" range active-color="#F58057" />
        </p>
      </div>
      <div>
        <div class="help_title">
          <p class="help_blon">03/04</p>
          <p class="help_text">拍卖成功后是否需要提供贷款服务</p>
        </div>
        <div class="room_box">
          <p
            v-for="(item, index) in needList"
            :key="index"
            @click="Onneed(item.id)"
            :class="[item.show?'region_text':'region_p']"
          >{{ item.text }}</p>
        </div>
      </div>
      <div>
        <div class="help_title">
          <p class="help_blon">04/04</p>
          <p class="help_text">联系方式</p>
        </div>
        <div class="subscribe_ipt">
          <van-field v-model="sms" center clearable placeholder="请输入手机号码">
            <template #button>
              <van-button class="subscribe_btn" v-if="disshow" @click="OnCode">获取验证码</van-button>
              <van-button class="subscribe_btn" v-else>{{ second }}s</van-button>
            </template>
          </van-field>
          <van-field v-model="code" placeholder="请输入验证码" />
        </div>
      </div>
      <p class="shour" @click="OnseachHouse">确定</p>
    </div>
    <!-- <div v-if="show">
      <helpMe />
    </div>-->
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
// import helpMe from "@/components/m_file/helpMe.vue";
import Right from "@/components/m_file/right.vue";
export default {
  data() {
    return {
      photo: "",
      code: "",
      value1: [1, 1000],
      active: "",
      value: [1, 1000],
      verifyCode: "",
      show: false,
      disshow: true,
      timer: null,
      second: 60,
      sms: "",
      houseId: "",

      needList: [
        {
          text: "需要",
          id: "1",
          show: false
        },
        {
          text: "不需要",
          id: "0",
          show: false
        }
      ],
      houseType: "",
      houseList: ["1居室", "2居室", "3居室", "4居室", "5居室", "5居以上"],

      region: [
        {
          text: "朝阳区",
          show: false
        },
        {
          text: "海淀区",
          show: false
        },
        {
          text: "西城区",
          show: false
        },
        {
          text: "东城区",
          show: false
        },
        {
          text: "大兴区",
          show: false
        },
        {
          text: "丰台区",
          show: false
        },
        {
          text: "通州区",
          show: false
        },
        {
          text: "昌平区",
          show: false
        },
        {
          text: "房山区",
          show: false
        },
        {
          text: "石景山",
          show: false
        },
        {
          text: "顺义区",
          show: false
        },
        {
          text: "延庆区",
          show: false
        },
        {
          text: "密云区",
          show: false
        },
        {
          text: "平谷区",
          show: false
        },
        {
          text: "怀柔区",
          show: false
        },
        {
          text: "门头沟",
          show: false
        }
      ]
    };
  },
  methods: {
    Onshour(val) {
      this.show = true;
    },
    OnCode() {
      this.disshow = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.disshow = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.sms
        })
        .then(res => {
          this.$notify({
            message: res.data.msg,
            duration: 2000
          });
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.disshow = true;
            this.second = 60;
          }
          // this.$message({
          //   message: res.data.msg
          // });
        })
        .catch(function(error) {});
    },
    Onregion(val) {
      this.region.forEach(item => {
        this.areasList = [];
        if (item.show == true) {
          this.areasList.push(val);
          this.areasList.forEach(item => {
            this.str += item + ",";
          });
        }
      });
    },
    Onneed(val) {
      this.isLoan = val;
      console.log(val);
      this.needList.forEach(item => {
        if (item.id == val) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    },
    Onhouse(val, idx) {
      console.log(val);
      this.houseType = val;
      this.houseId = idx;
    },
    OnseachHouse() {
      if (this.sms == "" && this.sms.length == 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
      } else {
        if (this.code == this.verifyCode && this.input != "") {
          this.instance
            .seachHouse({
              budgetLower: this.value[0],
              budgetUpper: this.value[1],
              areas: this.areas,
              houseType: this.houseType,
              builtUpAreaLower: this.value1[0],
              builtUpAreaUpper: this.value1[1],
              isLoan: this.isLoan,
              telephone: this.sms,
              verifyCode: this.code
            })
            .then(res => {
              if (res.data.code == 0) {
                this.isbox4 = false;
                this.isbox5 = true;
              }
              this.$notify({
                message: res.data.mag,
                duration: 2000
              });
            })
            .catch(function(error) {});
        } else {
          this.$notify({
            message: "请正确输入验证码",
            duration: 2000
          });
        }
      }
    }
  },
  components: {
    Header,
    Footer,
    Right

    // helpMe
  }
};
</script>
<style lang="less" scoped>
.subscribe_ipt {
  margin: 0 0.16rem;
  .van-cell {
    background: #f9f9f8;
    margin-bottom: 0.1rem;
    height: 0.44rem;
  }
  .subscribe_btn {
    border: none;
    background: #f9f9f8;
    border-left: 1px solid #e3e0df;
    color: #f5643e;
  }
}
.region_p {
  background: #f9f9f8;
  color: #232627;
}
.region_text {
  background: #f58057;
  color: #fff;
}
.help_me {
  .need_img {
    width: 100%;
    height: 1.14rem;
  }
  .help_title {
    overflow: hidden;
    margin: 0.15rem;
    p {
      float: left;
    }
    .help_blon {
      padding: 0.03rem 0.05rem;
      font-size: 0.13rem;
      color: #ffffff;
      background: #f58057;
      border-radius: 6px;
      margin-right: 0.1rem;
    }
    .help_text {
      font-size: 0.14rem;
      color: #333333;
    }
    .help_unit {
      font-size: 0.1rem;
      color: #999999;
      margin-left: 0.05rem;
      line-height: 0.25rem;
    }
  }
  .help_slider {
    padding: 0 0.15rem;
    margin-bottom: 0.4rem;
  }
  .help_num {
    margin: 0.2rem 0.15rem;
    font-size: 0.12rem;
    text-align: right;
    color: #f58057;
  }
  .city_box {
    overflow: hidden;
    margin-left: 0.14rem;
    p {
      float: left;
      width: 22%;
      border-radius: 10px;
      font-size: 0.12rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      text-align: center;
      line-height: 0.33rem;
    }
  }
  .room_box {
    overflow: hidden;
    margin-left: 0.14rem;
    p {
      float: left;
      width: 21%;
      border-radius: 10px;
      font-size: 0.12rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      text-align: center;
      line-height: 0.33rem;
    }
  }
  .shour {
    margin: 0.65rem 0.15rem 0.35rem 0.15rem;
    background: #f58057;
    border-radius: 10px;
    font-size: 0.15rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.44rem;
  }
}
</style>